import React, { Component } from "react";

import "./index.css";

export default class List extends Component {
    render() {
        const { users, isFirst, isLoading, err } = this.props;

        if (isFirst) {
            return <h2>请输入要搜索的用户名</h2>;
        }

        if (isLoading) {
            return <h2>Loading...</h2>;
        }

        if (err != null) {
            return <h2 style={{ color: "red" }}>{err.message}</h2>;
        }

        return (
            <div className="row">
                {users.map((u) => {
                    return (
                        <div key={u.id} className="card">
                            <a href={u.url} target="_blank" rel="noreferrer">
                                <img
                                    src={u.avatarUrl}
                                    style={{ width: "100px" }}
                                    alt={u.username}
                                />
                            </a>
                            <p className="card-text">{u.username}</p>
                        </div>
                    );
                })}
            </div>
        );
    }
}
